<template>
	<view class="content_goods">
		<view class="header_top">
			<view class="search_card">
				<view class="left_s">
					<uni-easyinput
						prefixIcon="search"
						@keydown.enter="OrderGoodsList"
						placeholderStyle="font-size:28rpx;"
						v-model="keyword"
						:inputBorder="false"
						placeholder="输入型号/名称/规格搜索"
						@clear="orderGoodsList"
						@confirm="OrderGoodsList"
						@input="OrderGoodsList"
					></uni-easyinput>
					<view class="search_btn" @click="OrderGoodsList">搜索</view>
				</view>
				<view class="my_goods" @click="selectMyGoods">
					<span class="red_num" v-if="seleMygoodsList.length > 0">
						{{ seleMygoodsList.length }}
					</span>
					<image
						src="/static/home/goods_blue.svg"
						class="img_msg"
						mode="aspectFit"
					></image>
					<span class="text_my">我的商品</span>
				</view>
			</view>
		</view>
		<view class="bodyer">
			<view class="classify-list">
				<div
					:class="{
						'classify-item': true,
						'active-classify-item': classify.id === getGoodListTypeId.typeId,
					}"
					v-for="(classify, classifyIndex) in goodClassifyList"
					:key="classifyIndex"
					@click="handleClassifyClick(classify)"
				>
					{{ classify.name }}
				</div>
			</view>
			<scroll-view
				class="goods_list"
				v-if="orderGoodsList.length > 0"
				scroll-y
				refresher-enabled
				@scrolltolower="onGoodListScrollToLower"
			>
				<view
					class="goods_item"
					v-for="(item, index) in orderGoodsList"
					:key="index"
				>
					<view class="goods_item_left">
						<view class="item_img">
							<image
								:src="item.image"
								v-if="item.image"
								@click="lookImg(item.image)"
								class="_img"
								mode="aspectFill"
							></image>
							<uni-icons color="#aac" size="48" v-else type="image"></uni-icons>
						</view>

						<view class="item_title">
							<view class="item_title_brand">
								{{ item.name }}
							</view>
							<!-- <view class="item_title_text">
								编号：
								<span class="item_title_color">{{ item.code }}</span>
							</view> -->
							<!-- <view class="item_title_text">
								型号：
								<span class="item_title_color">{{ item.model }}</span>
							</view> -->
							<!-- <view class="item_title_text">
								<view class="title">规格：</view>
								<span class="item_title_color">{{ item.specName }}</span>
							</view> -->
							<view class="item_title_text">
								销售型号：
								<span class="item_title_color">{{ item.saleModels }}</span>
							</view>
						</view>
					</view>
					<uni-icons
						type="plus-filled"
						size="26"
						@click="addGoods(item)"
						color="#007cff"
						v-if="!adddeleteList.includes(item.specId)"
					></uni-icons>
					<uni-icons
						type="minus-filled"
						size="26"
						@click="deleteGoods(item)"
						v-else
						color="#FF5733"
					></uni-icons>
				</view>
				<view class="no_some" v-if="title">
					{{ title }}
				</view>
			</scroll-view>
			<view v-if="keywordSearch" class="void_goods">
				<image class="img" src="/static/goods.svg" mode="aspectFit"></image>
				<view class="tip">查无商品信息</view>
			</view>
			<view v-else-if="orderGoodsList.length == 0" class="void_goods">
				<!-- <image class="img" src="/static/goods.svg" mode="aspectFit"></image> -->
				<view class="tip">
					请输入搜索查询...
					<uni-icons type="search" color="#999"></uni-icons>
				</view>
			</view>
		</view>
		<!-- 提交按钮 -->
		<view class="activeBtn" v-if="store.getters.getTotalList.length > 0">
			<view class="btn_Confirm">
				<view class="show_Confirm">
					已选择&nbsp;
					<span style="color: #007cff; font-weight: bold">
						{{ store.getters.getTotalNum }}
					</span>
					&nbsp;个商品
					<view class="details" @click="lookDetail()">
						明细
						<uni-icons type="top" color="#007cff"></uni-icons>
					</view>
				</view>
				<view class="btn" @click="btnSubmit">
					<view class="text">确认提交</view>
				</view>
			</view>
		</view>
		<!-- 我的商品弹窗 -->
		<uni-popup ref="popupMyGoodsRef" type="bottom" background-color="#eee">
			<view class="goodspopup">
				<view class="text_top_popup">
					我的商品
					<uni-icons
						class="icon"
						color="#333"
						@click="popupMyGoodsRef.close()"
						size="21"
						type="closeempty"
					></uni-icons>
				</view>
				<view class="goods_list">
					<view
						class="goods_item_bo"
						v-if="myGoodsList.length > 0"
						v-for="(item, index) in myGoodsList"
						:key="index"
					>
						<view class="over_Insured">
							<span class="tag" v-if="!item.overInsured">在保</span>
							<span class="tag tag_p" v-else>已过保</span>
						</view>
						<view class="goods_item_info">
							<view class="goods_item_left">
								<view class="item_img">
									<image
										:src="item.image"
										v-if="item.image"
										class="_img"
										mode="aspectFill"
									></image>
									<uni-icons
										color="#aac"
										size="48"
										v-else
										type="image"
									></uni-icons>
								</view>
								<view class="item_title">
									<view class="item_title_brand">
										{{ item.goodsName }}
									</view>
									<view class="item_title_text">
										<span>编号：</span>
										<span class="item_title_color">{{ item.code }}</span>
									</view>
									<view class="item_title_text">
										<span>型号：</span>
										<span class="item_title_color">{{ item.goodsModel }}</span>
									</view>
									<view class="item_title_text">
										<span>规格：</span>
										<span class="item_title_color">
											{{ item.goodsSpecName }}
										</span>
									</view>
									<view class="item_title_text">
										<span>SN码/一物一码：</span>
										<span class="item_title_color">{{ item.code }}</span>
									</view>
								</view>
							</view>
							<uni-icons
								type="plus-filled"
								size="26"
								v-if="!seleMygoodsList.includes(item.id)"
								color="#007cff"
								@click="addMyGoods(item)"
							></uni-icons>
							<uni-icons
								type="minus-filled"
								size="26"
								v-else
								color="#FF5733"
								@click="deleteMyGoods(item)"
							></uni-icons>
						</view>
					</view>
					<view v-else class="void_goods">
						<image class="img" src="/static/goods.svg" mode="aspectFit"></image>
						<view class="tip">暂无商品</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 明细弹窗 -->
		<uni-popup
			ref="popupMyGoodsDetailRef"
			type="bottom"
			background-color="#eee"
		>
			<view class="goodspopup">
				<view class="text_top_popup">
					已选择商品
					<uni-icons
						class="icon"
						color="#333"
						@click="popupMyGoodsDetailRef.close()"
						size="21"
						type="closeempty"
					></uni-icons>
				</view>
				<view class="">
					<view class="goods_list" v-if="store.getters.getTotalList.length > 0">
						<view
							class="goods_item"
							v-for="(item, index) in store.getters.getTotalList"
							:key="index"
						>
							<view class="goods_item_left">
								<view class="item_img">
									<image
										:src="item.image"
										v-if="item.image"
										@click="lookImg(item.image)"
										class="_img"
										mode="aspectFill"
									></image>
									<uni-icons
										color="#aac"
										size="48"
										v-else
										type="image"
									></uni-icons>
								</view>
								<view class="item_title">
									<view class="item_title_brand">
										{{ item.name }}
									</view>
									<view class="item_title_text">
										<span>型号：</span>
										<span class="item_title_color">{{ item.model }}</span>
									</view>
									<view class="item_title_text">
										<span>规格：</span>
										<span class="item_title_color">{{ item.specName }}</span>
									</view>
									<view class="item_title_code" v-if="item.code">
										<span>SN码/一物一码：</span>
										<span class="item_title_color">{{ item.code }}</span>
									</view>
									<view class="item_title_code">
										<span>销售型号：</span>
										<span class="item_title_color">{{ item.saleModels }}</span>
									</view>
								</view>
							</view>
							<uni-icons
								type="minus-filled"
								size="26"
								@click="deleteGoodsDetail(item)"
								color="#FF5733"
							></uni-icons>
						</view>
					</view>
					<view v-else class="void_goods">
						<image class="img" src="/static/goods.svg" mode="aspectFit"></image>
						<view class="tip">暂无商品</view>
					</view>
				</view>
			</view>
		</uni-popup>

		<uni-popup ref="goodInfoPopup">
			<view class="good-info-popup-container">
				<view class="header">
					<uni-icons
						class="icon"
						color="#aaa"
						size="20"
						type="closeempty"
						style="opacity: 0"
					></uni-icons>
					产品信息
					<uni-icons
						class="icon"
						color="#aaa"
						size="20"
						type="closeempty"
						@click="hideGoodInfoPopup"
					></uni-icons>
				</view>

				<view class="info-container" v-if="visibingGoodInfo">
					<view class="info-item">
						<view class="label">产品名称:</view>
						<view class="value">{{ visibingGoodInfo.name }}</view>
					</view>
					<view class="info-item">
						<view class="label">产品编号:</view>
						<view class="value">{{visibingGoodInfo.code}}</view>
					</view>
					<view class="info-item">
						<view class="label">产品规格:</view>
						<view class="value">{{visibingGoodInfo.specName}}</view>
					</view>
					<view class="info-item">
						<view class="label">销售型号:</view>
						<view class="value">{{visibingGoodInfo.saleModels}}</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup lang="ts">
	import {ref, watch} from 'vue';
	import apiGoods from '@/util/api/goods.js';
	import {onLoad, onUnload} from '@dcloudio/uni-app';
	import store from '@/store/index.js';
	import _ from 'lodash';

	const orderGoodsList = ref([]); //商品列表
	const keyword = ref(''); //搜索关键词：商品型号/商品名称/商品规格
	const popupMyGoodsDetailRef = ref(); //弹窗dom元素
	const adddeleteList = ref([]); //选中的商品规格id列表
	const page = ref(1);
	const total = ref(0);
	const title = ref('没有更多商品');
	const myGoodsList = ref([]); //我的商品列表
	const popupMyGoodsRef = ref(); //我的商品弹窗
	const getGoodClassifyListParam = ref({
		ascriptionType: '',
		departmentId: '',
		id: '',
		limit: 1000,
		name: '',
		page: 1,
	});
	const goodClassifyList = ref<
		Array<{id: string; level: 1 | 2 | 3 | 4; name: string}>
	>([]);
	const getGoodListTypeId = ref({
		typeId: '',
		level: 0,
	});
	const goodInfoPopup = ref();
	const visibingGoodInfo = ref();

	const getGoodClassifyList = async () => {
		const res = await apiGoods.getAllGoodClassify('');
		if (res.code !== 20000) {
			return;
		}

		goodClassifyList.value.length = 0;
		const addGoodClassifyList = (list) => {
			list.forEach((classify) => {
				if (classify.visibilityType !== 4) {
					goodClassifyList.value.push({
						id: classify.id,
						name: classify.name,
						level: classify.level,
					});
				}

				if (classify.childData.length > 0) {
					addGoodClassifyList(classify.childData);
				}
			});
		};
		addGoodClassifyList(res.data.rows);
		getGoodListTypeId.value = {
			typeId: goodClassifyList.value[0].id,
			level: goodClassifyList.value[0].level,
		}

	};

	// 弹窗我的商品 客户已登记商品
	const selectMyGoods = async () => {
		let data = {
			limit: 0,
			page: 0,
		};
		uni.showLoading({
			title: '加载中...',
		});
		await apiGoods.getUserOrderGoodsList(data).then((res) => {
			if (res.code == 20000) {
				myGoodsList.value = res.data.rows;
			}
		});
		uni.hideLoading();
		getselectMyGoodsList(store.state.orderGoodsTypes);
		popupMyGoodsRef.value.open();
	};
	//显示已选择 我的商品 客户已登记商品 id列表
	const seleMygoodsList = ref([]);
	const getselectMyGoodsList = (arry) => {
		seleMygoodsList.value = [];
		arry.filter((o) => {
			if (o.type == 1) {
				o.orderGoodsVos.filter((i) => {
					seleMygoodsList.value.push(i.codeIds[0]);
				});
			}
		});
	};
	// 我的商品添加 客户已登记商品
	const addMyGoods = (item) => {
		let tmp = {
			buyMarket: item?.buyMarket || '',
			buyTime: item.warrantyStartTime,
			codeIds: [item.id],
			endTime: '',
			goodsId: item.goodsId,
			goodsSpecId: item.goodsSpecId,
			id: null,
			qty: 1,
			name: item.goodsName,
			specName: item.goodsSpecName,
			code: item.code,
			brandId: item.brandId,
			brand: item.goodsBrand,
			typeId: '',
			type: item.goodsType,
			model: item.goodsModel,
			image: '',
			typeGoods: 1, //1-客户已登记商品，2-未登记商品，3-商品信息
		};
		let orderGoodsTypes = store.state.orderGoodsTypes;
		if (store.state.orderGoodsTypes.length == 0) {
			orderGoodsTypes.push({type: 1, orderGoodsVos: [tmp]});
		} else {
			//品牌 依次判断每个元素，如果存在某个元素符合条件，则返回true；没有元素符合条件则返回false。
			const result = store.state.orderGoodsTypes.some((o) => o.type == 1);
			if (result) {
				orderGoodsTypes = store.state.orderGoodsTypes.map((o) => {
					if (o.type == 1) {
						o.orderGoodsVos.push(tmp);
					}
					return o;
				});
			} else {
				orderGoodsTypes.push({type: 1, orderGoodsVos: [tmp]});
			}
		}
		getselectMyGoodsList(orderGoodsTypes);
		store.commit('setorderGoodsTypes', orderGoodsTypes);
	};
	// 删除 客户已登记商品
	const deleteMyGoods = (item) => {
		let orderGoodsTypes = store.state.orderGoodsTypes.filter((o) => {
			if (o.type == 1) {
				o.orderGoodsVos = o.orderGoodsVos.filter((k) => {
					if (k.codeIds[0] != item.id) {
						return k;
					}
				});
				// 如果客户已登记商品为空，则删除该客户已登记商品不返回
				if (o.orderGoodsVos.length == 0) {
					return !o;
				}
			}
			return o;
		});
		getselectMyGoodsList(orderGoodsTypes);
		store.commit('setorderGoodsTypes', orderGoodsTypes);
	};
	const keywordSearch = ref(false);
	// 获取品牌列表
	const OrderGoodsList = _.debounce(
		async () => {
			if (!keyword.value.trim()) {
				// orderGoodsList.value = [];
				// total.value = 0;
				// page.value = 1;
				// return;
			}
			const data = {
				// "brandId": store.state.checkBrandItem.id,
				keyword: keyword.value.trim(), //搜索关键词：商品型号/商品名称/商品规格
				limit: 0,
				page: page.value,
				// "typeId": store.state.checkClassifyItem.id,
				typeId: '',
				typeTwoId: '',
				typeThreeId: '',
			};

			if (getGoodListTypeId.value.level === 1) {
				data.typeId = getGoodListTypeId.value.typeId;
				data.typeTwoId = '';
				data.typeThreeId = '';
			}

			if (getGoodListTypeId.value.level === 2) {
				data.typeId = '';
				data.typeTwoId = getGoodListTypeId.value.typeId;
				data.typeThreeId = '';
			}

			if (getGoodListTypeId.value.level === 3) {
				data.typeId = '';
				data.typeTwoId = '';
				data.typeThreeId = getGoodListTypeId.value.typeId;
			}

			uni.showLoading({
				title: '加载中...',
				mask: true,
			});
			const res = await apiGoods.getOrderGoodsList(data);
			if (res.code === 20000) {
				if (page.value == 1) {
					orderGoodsList.value = res.data.rows;
				} else {
					orderGoodsList.value = [...orderGoodsList.value, ...res.data.rows];
				}
				keywordSearch.value = orderGoodsList.value.length == 0;
				total.value = res.data.total;
			}
			uni.hideLoading();
		},
		600,
		{leading: false},
	);

	const goodListRefreshState = ref(false);

	const onGoodListScrollToLower = () => {
		if (orderGoodsList.value.length < total.value) {
			page.value += 1;
			OrderGoodsList();
		}
	};

	// 查看明细
	const lookDetail = () => {
		popupMyGoodsDetailRef.value.open();
	};
	// 删除明细列表的商品
	const deleteGoodsDetail = (item) => {
		store.commit('deleteGoods', item);
		getAddgoodsList(store.state.orderGoodsTypes);
		getselectMyGoodsList(store.state.orderGoodsTypes);
	};
	// 确认提交
	const btnSubmit = () => {
		var pages = getCurrentPages();
		var pageIndex = pages
			.slice()
			.reverse()
			.findIndex((o) => o.route == 'pages_user/home/add');
		if (pageIndex == -1) {
			uni.navigateTo({
				url: '/pages_user/home/add',
			});
		} else {
			uni.navigateBack({delta: pageIndex});
		}
		popupMyGoodsDetailRef.value.close();
		popupMyGoodsRef.value.close();
	};
	//显示已选择 商品规格 id列表
	const getAddgoodsList = (arry) => {
		adddeleteList.value = [];
		arry.filter((o) => {
			o.orderGoodsVos.filter((i) => {
				adddeleteList.value.push(i.goodsSpecId);
			});
		});
	};
	// 预览图片
	const lookImg = (url) => {
		uni.previewImage({
			urls: [url],
		});
	};
	// 添加商品
	const addGoods = (item) => {
		let tmp = {
			buyTime: '',
			buyMarket: '',
			codeIds: [],
			endTime: '',
			goodsId: item.id,
			goodsSpecId: item.specId,
			id: null,
			qty: 1,
			name: item.name,
			specName: item.specName,
			code: '',
			brandId: item.brandId,
			brand: item.brand,
			typeId: item.typeId,
			type: item.type,
			model: item.model,
			image: item.image,
			typeGoods: 3, //1-客户已登记商品，2-未登记商品，3-商品信息
			saleModels: item.saleModels,
		};
		let orderGoodsTypes = store.state.orderGoodsTypes;
		if (store.state.orderGoodsTypes.length == 0) {
			orderGoodsTypes.push({type: 3, orderGoodsVos: [tmp]});
		} else {
			//品牌 依次判断每个元素，如果存在某个元素符合条件，则返回true；没有元素符合条件则返回false。
			const result = store.state.orderGoodsTypes.some((o) => o.type == 3);
			if (result) {
				orderGoodsTypes = store.state.orderGoodsTypes.map((o) => {
					if (o.type == 3) {
						o.orderGoodsVos.push(tmp);
					}
					return o;
				});
			} else {
				orderGoodsTypes.push({type: 3, orderGoodsVos: [tmp]});
			}
		}
		getAddgoodsList(orderGoodsTypes);
		store.commit('setorderGoodsTypes', orderGoodsTypes);
	};
	// 删除商品
	const deleteGoods = (item) => {
		let tmp = {
			buyTime: '',
			buyMarket: '',
			codeIds: [],
			endTime: '',
			goodsId: item.id,
			goodsSpecId: item.specId,
			id: null,
			qty: 1,
			name: item.name,
			specName: item.specName,
			code: '',
			brandId: item.brandId,
			brand: item.brand,
			typeId: item.typeId,
			type: item.type,
			model: item.model,
			image: item.image,
			typeGoods: 3, //1-客户已登记商品，2-未登记商品，3-商品信息
		};
		store.commit('deleteGoods', tmp);
		getAddgoodsList(store.state.orderGoodsTypes);
	};

	const handleClassifyClick = async (classify) => {
		getGoodListTypeId.value = {
			typeId: classify.id,
			level: classify.level,
		};
		await OrderGoodsList();
	};

	const handleGoodInfoClick = (goodInfo) => {
		if (goodInfoPopup.value) {
			goodInfoPopup.value.open();
			visibingGoodInfo.value = goodInfo;
		}
	};
	
	const hideGoodInfoPopup = () => {
		if (goodInfoPopup.value) {
			goodInfoPopup.value.close();
			visibingGoodInfo.value = null;
		}
	}

	watch(
		() => store.state.orderGoodsTypes,
		() => {
			getAddgoodsList(store.state.orderGoodsTypes);
			getselectMyGoodsList(store.state.orderGoodsTypes);
		},
	);

	// 通过onLoad接收数据
	onLoad(async (e) => {
		// getAddgoodsList(store.state.orderGoodsTypes)
		getGoodListTypeId.value = {
			typeId: '',
			level: 0,
		};
		await getGoodClassifyList();
		await OrderGoodsList();
	});

	onUnload(() => {
		uni.hideLoading();
	});
</script>

<style lang="scss">
	.content_goods {
		width: 100vw;
		/* #ifdef H5 */
		height: calc(100vh - 44px);
		/* #endif */
		/* #ifndef H5 */
		height: 100vh;
		/* #endif */
		background-color: #fafafa;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		row-gap: 24rpx;

		.header_top {
			width: 100%;
			padding: 24rpx 24rpx 0 24rpx;
			box-sizing: border-box;

			.search_card {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.left_s {
					display: flex;
					align-items: center;
					background-color: #fff;
					border-radius: 40rpx;
					height: 80rpx;
					width: 100%;

					:deep(.uni-easyinput__content) {
						height: 80rpx;
						border-radius: 40rpx 0 0 40rpx;

						&.is-focused {
							.uniui-clear,
							.uniui-eye-filled {
								color: #007cff99 !important;
							}
						}
					}

					.search_btn {
						font-size: 24rpx;
						border-left: 2rpx solid #007cff;
						color: #000;
						line-height: 40rpx;
						padding: 0 20rpx;
						height: 40rpx;
						color: #007cff;
						border-radius: 0 40rpx 40rpx 0;
					}
				}

				.my_goods {
					display: flex;
					align-items: center;
					font-size: 28rpx;
					flex-wrap: nowrap;
					position: relative;

					.text_my {
						white-space: nowrap;
						color: #007cff;
						font-size: 24rpx;
					}

					.img_msg {
						width: 35rpx;
						height: 35rpx;
						margin-left: 10rpx;
						margin-right: 4rpx;
						border-radius: 50%;
					}

					.red_num {
						background-color: #ff5733;
						width: 40rpx;
						height: 40rpx;
						line-height: 40rpx;
						position: absolute;
						top: -30rpx;
						right: -20rpx;
						text-align: center;
						border-radius: 50%;
						color: #fff;
						font-size: 22rpx;
						transform: scale(0.8);
					}
				}
			}
		}

		.bodyer {
			flex: 1;
			height: 0;
			width: 100%;
			display: flex;
			background-color: #fafafa;
			column-gap: 24rpx;

			.classify-list {
				width: 200rpx;
				height: 100%;
				overflow-y: auto;

				.classify-item {
					font-size: 24rpx;
					height: fit-content;
					display: flex;
					align-items: center;
					padding: 16rpx 0 16rpx 24rpx;
				}

				.active-classify-item {
					color: #007cff;
					border-left: 4rpx solid #007cff;
				}
			}

			.goods_list {
				height: 100%;
				width: 0;
				flex: 1;
				padding-right: 24rpx;

				.no_some {
					font-size: 24rpx;
					color: #ccc;
					text-align: center;
					width: 100%;
					padding-bottom: 200rpx;
				}

				.goods_item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					background-color: #fff;
					border-radius: 10rpx;
					padding: 24rpx;
					margin-bottom: 24rpx;

					.goods_item_left {
						display: flex;
						flex: 1;
						width: 0;
						// align-items: center;

						.item_img {
							width: 140rpx;
							height: 140rpx;
							background-color: #fff;
							border-radius: 4rpx;
							border: 1px solid #eee;
						}

						._img {
							width: 140rpx;
							height: 140rpx;
							border-radius: 4rpx;
						}

						.item_title {
							font-size: 24rpx;
							margin-left: 24rpx;
							flex: 1;
							width: 0;

							.item_title_name {
								margin-bottom: 10rpx;
								font-weight: bold;
								font-size: 24rpx;
								display: -webkit-box;
								-webkit-line-clamp: 2;
								-webkit-box-orient: vertical;
								overflow: hidden;
								word-wrap: break-word;
								word-break: break-all;
							}

							.item_title_brand {
								font-size: 20rpx;
								margin-bottom: 10rpx;
								display: -webkit-box;
								-webkit-line-clamp: 2;
								-webkit-box-orient: vertical;
								overflow: hidden;
								word-wrap: break-word;
								word-break: break-all;

								.dot {
									font-weight: bold;
									padding: 0 10rpx;
								}
							}

							.item_title_text {
								font-size: 20rpx;
								color: #777;
								margin-bottom: 10rpx;
								display: flex;
								width: 100%;

								.title {
									white-space: nowrap;
								}

								.item_title_color {
									color: #000;
									flex: 1;
									width: 0;
									// display: -webkit-box;
									// -webkit-line-clamp: 2;
									// -webkit-box-orient: vertical;
									// overflow: hidden;
									// white-space: nowrap;
									// overflow: hidden;
									// text-overflow: ellipsis;
									word-break: break-all;
								}
							}

							.item_title_code {
								font-size: 20rpx;
								color: #777;
							}
						}
					}
				}
			}

			.void_goods {
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				flex: 1;
				width: 0;
				height: 100%;
				// height: calc(100vh - 44px);
				// background-color: #fafafa;

				.img {
					width: 60%;
					height: 250rpx;
				}

				.tip {
					color: #aaa;
					font-size: 28rpx;
				}
			}
		}

		.activeBtn {
			background-color: #fff;
			padding: 30rpx 0 40rpx;
			border-top: 1rpx solid #eee;

			.btn_Confirm {
				background-color: #f5f7fa;
				display: flex;
				justify-content: space-between;
				border-radius: 50rpx;
				margin: 0rpx 30rpx;

				.show_Confirm {
					font-size: 24rpx;
					display: flex;
					padding: 18rpx;
					align-items: center;

					.details {
						color: #007cff;
						margin-left: 12rpx;
					}
				}

				.btn {
					background-color: #007cff;
					padding: 18rpx;
					border-radius: 0 50rpx 50rpx 0;

					.text {
						color: #fff;
						font-size: 24rpx;
					}
				}
			}
		}

		.goodspopup {
			height: 1200rpx;
			background-color: #f6f7fa;
			position: relative;
			z-index: 2;

			.text_top_popup {
				text-align: center;
				font-size: 32rpx;
				padding: 24rpx 0;
				font-weight: bold;
				background-color: #fff;

				.icon {
					position: absolute;
					right: 30rpx;
					font-weight: 500;
				}
			}

			.goods_list {
				margin: 0 24rpx;
				width: calc(100% - 48rpx);
				overflow-y: auto;
				height: 90vh;

				&::-webkit-scrollbar {
					width: 0;
					height: 0;
					-webkit-appearance: none;
					color: transparent;
					display: none;
				}

				.goods_item_bo {
					background-color: #fff;
					margin: 24rpx 0;
					border-radius: 4rpx;
					padding: 24rpx;

					.over_Insured {
						text-align: right;
						font-size: 24rpx;
						position: relative;
						top: 0;
						right: -12rpx;

						.tag {
							background-color: #007cff;
							color: #fff;
							font-size: 22rpx;
							padding: 2rpx 4rpx;
							border-radius: 4rpx;
							margin-right: 6rpx;

							&.tag_p {
								background-color: #ccc;
								color: #eee;
							}
						}
					}

					&:last-child {
						margin-bottom: 40vh;
					}

					.goods_item_info {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.item_title_status1 {
							position: absolute;
							top: 24rpx;
							right: 24rpx;
							font-size: 24rpx;
							background-color: #007cff;
							color: #fff;
							padding: 4rpx;
						}

						.item_title_status1 {
							position: absolute;
							top: 24rpx;
							right: 24rpx;
							font-size: 24rpx;
							background-color: #999;
							color: #fff;
							padding: 4rpx;
						}

						.goods_item_left {
							display: flex;
							font-size: 20rpx;
							// align-items: center;

							.item_img {
								width: 140rpx;
								height: 140rpx;
								background-color: #fff;
								border-radius: 4rpx;
								border: 1px solid #eee;
							}

							._img {
								width: 140rpx;
								height: 140rpx;
								border-radius: 4rpx;
							}

							.item_title {
								margin-left: 20rpx;
								flex: 1;
								display: flex;
								flex-direction: column;
								row-gap: 10rpx;

								.item_title_name {
									font-weight: bold;
									display: -webkit-box;
									-webkit-line-clamp: 2;
									-webkit-box-orient: vertical;
									overflow: hidden;
									word-wrap: break-word;
									word-break: break-all;
								}

								.item_title_brand {
									display: -webkit-box;
									-webkit-line-clamp: 2;
									-webkit-box-orient: vertical;
									overflow: hidden;
									word-wrap: break-word;
									word-break: break-all;
								}

								.item_title_text {
									color: #777;
									display: flex;
									flex-wrap: wrap;

									.item_title_color {
										color: #000;
										flex: 1;
										display: -webkit-box;
										-webkit-line-clamp: 2;
										-webkit-box-orient: vertical;
										overflow: hidden;
										word-wrap: break-word;
										word-break: break-all;
									}
								}

								.item_title_code {
									color: #999;
									display: flex;
									flex-wrap: wrap;

									.item_title_color {
										color: #000;
										flex: 1;
										display: -webkit-box;
										-webkit-line-clamp: 2;
										-webkit-box-orient: vertical;
										overflow: hidden;
										word-wrap: break-word;
										word-break: break-all;
									}
								}
							}
						}
					}
				}

				.goods_item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					background-color: #fff;
					margin: 24rpx 0;
					border-radius: 10rpx;
					padding: 24rpx;

					&:last-child {
						margin-bottom: 40vh;
					}

					position: relative;

					.item_title_status1 {
						position: absolute;
						top: 24rpx;
						right: 24rpx;
						font-size: 24rpx;
						background-color: #007cff;
						color: #fff;
						padding: 4rpx;
					}

					.item_title_status1 {
						position: absolute;
						top: 24rpx;
						right: 24rpx;
						font-size: 24rpx;
						background-color: #999;
						color: #fff;
						padding: 4rpx;
					}

					.goods_item_left {
						display: flex;
						// align-items: center;

						.item_img {
							width: 140rpx;
							height: 140rpx;
							background-color: #fff;
							border-radius: 4rpx;
							border: 1px solid #eee;
						}

						._img {
							width: 140rpx;
							height: 140rpx;
							border-radius: 4rpx;
						}

						.item_title {
							font-size: 24rpx;
							margin-left: 24rpx;
							flex: 1;

							.item_title_name {
								margin-bottom: 10rpx;
								font-weight: bold;
								font-size: 28rpx;
								display: -webkit-box;
								-webkit-line-clamp: 2;
								-webkit-box-orient: vertical;
								overflow: hidden;
								word-wrap: break-word;
								word-break: break-all;
							}

							.item_title_brand {
								font-size: 20rpx;
								margin-bottom: 10rpx;
								display: -webkit-box;
								-webkit-line-clamp: 2;
								-webkit-box-orient: vertical;
								overflow: hidden;
								word-wrap: break-word;
								word-break: break-all;

								.dot {
									font-weight: bold;
									padding: 0 10rpx;
								}
							}

							.item_title_text {
								font-size: 20rpx;
								color: #777;
								margin-bottom: 10rpx;
								display: flex;
								flex-wrap: wrap;

								.item_title_color {
									color: #000;
									flex: 1;
									display: -webkit-box;
									-webkit-line-clamp: 2;
									-webkit-box-orient: vertical;
									overflow: hidden;
									word-wrap: break-word;
									word-break: break-all;
								}
							}

							.item_title_code {
								font-size: 20rpx;
								color: #777;
								display: flex;
								flex-wrap: wrap;

								.item_title_color {
									color: #000;
									flex: 1;
									display: -webkit-box;
									-webkit-line-clamp: 2;
									-webkit-box-orient: vertical;
									overflow: hidden;
									word-wrap: break-word;
									word-break: break-all;
								}
							}
						}
					}
				}
			}

			.void_goods {
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				width: 100%;
				height: 60vh;

				.img {
					width: 60%;
					height: 250rpx;
				}

				.tip {
					color: #aaa;
					font-size: 28rpx;
				}
			}
		}
	}

	.good-info-popup-container {
		background-color: #fff;
		border-radius: 8rpx;
		width: 500rpx;
		font-size: 24rpx;
		padding: 24rpx;
		display: flex;
		flex-direction: column;
		row-gap: 24rpx;

		.header {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.info-container {
			display: flex;
			flex-direction: column;
			row-gap: 24rpx;
			
			.info-item {
				display: flex;
				column-gap: 16rpx;
				
				.label {
					white-space: nowrap;
					color: gray;
				}
			}
		}
	}
</style>
